<template>
	<view class="content">
		<view class="button_container">
			<button class="button_style" size="mini" type="primary" @click="connect_save_deviced">连接蓝牙设备</button>
			<button class="button_style" size="mini" type="primary" @click="getInputStream">获取蓝牙数据</button>
			<button class="button_style" size="mini" type="primary" @click="startInputStream">观察数据</button>
			<!-- <button class="button_style" size="mini" type="primary" @click="stopInputStream">停止观察并保存数据</button> -->
			<button class="button_style" size="mini" type="primary" @click="saveInputStream">停止观察并保存数据</button>
		</view>
		<view class="echarts-wrap"><canvas canvas-id="canvasColumn" id="canvasColumn" class="charts"></canvas></view>
	</view>
</template>
<!--  -->
<script>
import uCharts from '@/components/u-charts/u-charts.js';
import eChartsOptions from '../../utils/options.js';
import BlueTooth from '../../utils/tooth.js';
import data from '../../utils/data.js';
import { ioWriterPlus, ioReaderPlus, date2time } from '../../utils/utils.js';

const Instance = new BlueTooth();

export default {
	data() {
		return {
			title: 'Hello',
			echarts: {
				categories: [],
				series: [
					{
						name: '电流值',
						data: [],
						type: 'line'
					}
				]
			},
			params: [],
			options: '',
			myChart: null,
			BluetoothAdapter: null,
			mBluetoothAdapter: null,
			list_save: [],
			receiver: null,
			BluetoothDevice: null,
			main: null,
			data_connect: [],
			lcass_item_slted: {},
			bluetoothSocket: null,
			startTimeVal: null,
			targetStart: new Date(),
			targetZore: 0,
			targetSpace: 200,
			instanceColumn: null
		};
	},
	onLoad() {
		Instance.broadcastReceiver();
		// this.startInputStream();
	},
	onReady() {
		this.showColumn('canvasColumn', this.echarts);
	},
	methods: {
		showColumn(canvasId, chartData) {
			const colors = ['#facc14', '#f04864', '#8543e0', '#90ed7d'];
			this.instanceColumn = new uCharts({
				$this: this,
				canvasId: canvasId,
				type: 'line',
				colors: colors,
				fontSize: 11,
				padding: [15, 15, 0, 15],
				dataLabel: false,
				background: '#FFFFFF',
				pixelRatio: 1,
				categories: chartData.categories,
				series: chartData.series,
				animation: false,
				xAxis: {
					type: 'grid',
					gridColor: '#CCCCCC',
					gridType: 'dash',
					labelCount: 8
					// disabled:true
				},
				yAxis: {
					gridType: 'dash',
					gridColor: '#CCCCCC',
					dashLength: 6
				},
				width: 360,
				height: 240,
				extra: {
					line: {
						type: 'curve'
					}
				}
			});
		},
		getInputStream() {
			this.instanceColumn.updateData(this.echarts);
			setTimeout(()=>{
				Instance.inputStreamNotify(this.dataCreate);
			},1000)
		},
		connect_save_deviced() {
			Instance.connectState();
		},
		dataCreate(data = 0) {
			data = isNaN(Number(data)) ? 0 : Number(data);
			this.params.push({
				value: data,
				categorie: this.targetZore
			});
			this.echarts.categories.push(this.targetZore++);
			this.echarts.series[0].data.push(data);
			const limit = 40;
			if (this.echarts.categories.length >= limit) {
				this.echarts.categories = this.echarts.categories.slice(-limit);
				this.echarts.series[0].data = this.echarts.series[0].data.slice(-limit);
			}

			this.instanceColumn.updateData(this.echarts);
			if (this.params.length >= 3600) {
				this.saveInputStream();
			}
		},
		saveInputStream() {
			ioWriterPlus({
				start: this.targetStart,
				data: this.params
			}).then(res => {
				if (this.startTimeVal) {
					clearInterval(this.startTimeVal);
					this.startTimeVal = null;
				}
				Instance.clearChartsVal();
				this.echarts.series[0].data = [];
				this.echarts.categories = [];
				this.params = [];
				this.options = '';
				this.targetStart = date2time(this.targetSpace, 0);
			});
		},
		startInputStream() {
			if (this.startTimeVal) {
				console.log('is exist');
			} else {
				this.targetZore = 0;
				this.targetStart = date2time(this.targetSpace, 0);
				this.params = [];
				this.startTimeVal = setInterval(() => {
					const data = (Math.random() * 100).toFixed(2);
					this.dataCreate(data);
				}, this.targetSpace);
			}
		},
		stopInputStream() {
			if (this.startTimeVal) {
				clearInterval(this.startTimeVal);
				this.startTimeVal = null;
			}
			Instance.clearChartsVal();
			this.params = [];
			this.options = '';
			this.targetStart = date2time(this.targetSpace, 0);
		}
	},
	components: {}
};
</script>

<style>
.content {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.button_container {
	display: flex;
	align-items: center;
	flex-direction: column;
	width: 100%;
}

.button_style {
	width: 60%;
	margin-top: 20upx;
}

.charts {
	width: 750upx;
	height: 500upx;
	background-color: #ffffff;
}

.echarts-wrap {
	display: flex;
	width: 750upx;
	height: 640upx;
}

.echarts {
	margin-top: 40upx;
	width: 100%;
	height: 580upx;
}
</style>
